import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Icon, NoticeBar } from 'antd-mobile'
import { CenterHeader } from 'component/header'
import { FooterBar } from 'component/footer'
import { TopAccount } from 'component/trade'
import './accountItem.less'
import { AccountItemAll, AccountName } from './'


export default class AccountPage extends Component {
  render() {
    return (
      <div>
        <CenterHeader title={<FormattedMessage id="account"/>}/>
        <AccountName />
        <NoticeBar
          mode="closable"
          icon={null}
          className="rt-notice-bar"
        >
          <FormattedMessage
            id='notice_noChange'
          />
          <span className="-notice_change">
            <FormattedMessage
              id='notice_change'
            />
          </span>
        </NoticeBar>
        <TopAccount/>
        
        <div className="cm-scrollable-container rt-bg-grey">
          <div className="rt-height22"></div>
          <AccountItemAll />
        </div>
        <FooterBar activeIndex={4}/>
      </div>
    )
  }
}
